<template>
	<!-- / -->
	<view class="zone">
		<Header title="收款方式" color="#fff"></Header>
		<view class="status_bar"></view>
		<view class="main">
			<view class="box">
				<view class="top">
					<image src="http://img.cpgm.cc/panda/static/public/zhi.png" mode="widthFix" />
					<view class="word">
						<p>支付宝作为账户的唯一收款账号</p>
						<p>绑定提现账户以后无法更改，请谨慎填写</p>
					</view>
				</view>

				<view class="list">
					<view class="item">
						<text>收款人姓名</text>
						<input type="text" :disabled="act" v-model="name" placeholder="请输入姓名">
					</view>
					<view class="item">
						<text>支付宝账号</text>
						<input type="text" :disabled="act" v-model="ali_account" placeholder="请输入支付宝账号">
					</view>
				</view>

				<!-- 下方的按钮 -->
				<u-button :plain="true" :class="[act?'active' :' ']" @click="submits" class="btn button" :hair-line="false"
					hover-class="none" :throttle-time="1000">
					{{act?'已绑定':'绑定'}}
				</u-button>
			</view>


			<!-- 下面的表单 -->
			<!-- <view class="oneINp">
				<text class="text">收款人姓名</text>
				<input type="text" class="inp" :disabled="act" v-model="name" placeholder="请输入姓名">
			</view>
			<view class="towINp">
				<text class="text">支付宝账号</text>
				<input type="text" class="inp" :disabled="act" v-model="ali_account" placeholder="请输入支付宝账号">
			</view> -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				ali_account: '',
				act: false
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 获取信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				// console.log(res);
				this.name = res.data.alipay_name
				this.ali_account = res.data.alipay_account
				if (this.name == '' || this.name == null) {
					this.act = false
				} else {
					this.act = true
				}
			},
			// 提交
			async submits() {
				if (this.name == '' || this.name == null) {
					this.$u.toast('收款人姓名不能为空')
				} else if (this.ali_account == '' || this.ali_account == null) {
					this.$u.toast('支付宝账号不能为空')
				} else if (!/(^1[3-9]\d{9}$)|(^[\w\d-]+(\.[\w\d-]+)*@[\w\d-]+(\.[\w\d-]+)+$)/.test(this.ali_account)) {
					this.$u.toast('支付宝账号不合法');
				} else if (!!this.act) {
					this.$u.toast('已绑定');
				} else {
					let res = await this.$http.index.bindAli({
						name: this.name,
						ali_account: this.ali_account
					})
					this.$u.toast(res.msg)
					if (res.code == 1) {
						this.getUserInfo()
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>

	.zone {
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
		min-height: 100vh;
	}

	.main {
		padding: 10px;
	}

	.box {
		background:  rgba(255,255,255,0.7);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 9px;
		padding: 15px;
	}

	.top {
		background: #fff;
		padding: 10px;
		display: flex;
		align-items: center;

		image {
			width: 55px;
			margin-right: 10px;
		}

		.word {
			p:nth-child(1) {
				color: #000;
				font-size: 13px;
				font-weight: 600;
			}
			p:nth-child(2) {
				color: #000;
				font-size: 12px;
			}
		}
	}

	.list {
		margin-top: 10px;

		.item {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 20px 15px;
			display: flex;
			align-items: center;
			border-radius: 10px;
			margin: 10px 0;

			text {
				color: #000;
				font-size: 14px;
				font-weight: 600;
			}

			input {
				margin-left: 10px;
				flex: 1;
				font-size: 13px;
			}
		}
	}

	.btn_b {
		width: 100%;
		height: 100%;
	}

	.btn {
		width: 100%;
		height: 67px;
		line-height: 67px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #343434;
		background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
		background-size: 100% 100%;
		margin-top: 10vh;
	}

	.active {
		filter: grayscale(1);
	}

	

</style>